<template>
  <el-row style="padding: 80px 20px 0 20px;background-color:#f8fafd">
    <!-- 顶部搜索框 -->
    <div class="searchbox">
      <span class="left">商品类型搜索：</span>
      <el-input placeholder="请输入" v-model="className" clearable></el-input>
      <el-button icon="el-icon-search" @click="searchbtn">查询</el-button>
    </div>
    <!--中部新建按钮  -->
    <div class="down">
      <div class="mid"><el-button icon="el-icon-circle-plus-outline" @click="createDia.visible=true">新建</el-button></div>
      <el-table  :data="goodstypelist.currentPageRecords" stripe style="width: 100%">
        <el-table-column  type="index" label="序号" width="80"/>
        <el-table-column prop="className" label="商品类型名称" min-width="180"/>
        <el-table-column  label="操作" width="150">
          <template v-slot="{row}">
            <a href="javascript:;" @click="changetype(row)">修改</a>
            <a style="color:red;margin-left:10px" href="javascript:;" @click="deltype(row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageinfo" >
          <span>共条{{this.goodstypelist.totalCount}}记录  第{{this.goodstypelist.pageIndex}}/{{this.goodstypelist.totalPage}}页</span>
          <div class="button">
            <el-button class="pagebutton" :disabled="goodstypelist.pageIndex==='1'||''?true:false" @click="pageup">上一页</el-button>
            <el-button class="pagebutton" :disabled="goodstypelist.pageIndex===goodstypelist.totalPage" @click="pagedown">下一页</el-button>
          </div>
      </div>
      <!-- 新建的dialog -->
      <el-dialog  :title="createDia.type"  :visible="createDia.visible"  width="50%" @close="createDia.visible=false" >
            <el-form ref="createform" style="pading:20px 20px;display:flex;justify-content:center;width:100%" :model="createDia" >
              <el-form-item prop="searchinfo" label="商品类型名称" :rules="[{required:true,message:'请输入商品类型',trigger:'blur'}]" >
                <el-input  style="width:400px" type="text"  placeholder="请输入内容"  v-model="createDia.searchinfo"  maxlength="15"  show-word-limit/>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="createDia.visible = false">取 消</el-button>
              <el-button class="pagebutton" type="primary" @click="createSubmit">确 定</el-button>
            </span>
      </el-dialog>
    </div>
  </el-row>
</template>

<script>
import { getgoodstypelist, addgoodstype, changetypename, deltypename } from '@/api/goods/goodstype'
export default {
  created () {
    this.getgoodstypelist()// 调用重新获取列表的函数
  },
  data () {
    return {
      goodstypelist: {},
      className: '',
      createDia: {
        visible: false,
        searchinfo: '',
        type: '新增商品类型'
      }
    }
  },
  methods: {
    searchbtn () { // 搜索
      this.getgoodstypelist()
    },
    async pageup () { // 上一页
      this.goodstypelist.pageIndex--
      const { data } = await getgoodstypelist({ pageIndex: this.goodstypelist.pageIndex, pageSize: 10 })
      this.goodstypelist = data
    },
    async pagedown () { // 下一页
      this.goodstypelist.pageIndex++
      const { data } = await getgoodstypelist({ pageIndex: this.goodstypelist.pageIndex, pageSize: 10 })
      this.goodstypelist = data
    },
    async getgoodstypelist () { // 重新获取列表(默认第一页 一页10条)
      const { data } = await getgoodstypelist({ pageIndex: 1, pageSize: 10, className: this.className })
      this.goodstypelist = data
    },
    async createSubmit () { // 新建商品类型
      try {
        this.$refs.createform.validate(
          async isok => {
            if (isok && this.createDia.type === '新增商品类型') {
              await addgoodstype({ className: this.createDia.searchinfo })
              this.$message.success('添加成功')
              this.getgoodstypelist()
            } else if (isok && this.createDia.type === '修改商品类型') {
              await changetypename(this.createDia.classId)
              this.$message.success('修改成功')
            }
          }
        )
      } catch (e) {
        console.log(e)
      } finally {
        this.createDia.visible = false
      }
    },
    async changetype (row) { // 修改商品类型名称
      this.createDia.type = '修改商品类型'
      this.createDia.searchinfo = row.className
      this.createDia.id = row.classId
      this.createDia.visible = true
      // console.log(row)
    },
    async deltype (row) { // 删除商品类型
      await deltypename(row.classId)
      this.$message.success('删除成功')
      this.getgoodstypelist()
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  .searchbox {
    // background-color: skyblue;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 64px;
    width: 100%;
    span{
      font-size: 14px;
      width:110px;
      line-height: 36px;
      height:36px;
    }
    .el-input {
      width: 210px;
      line-height: 36px;
      // height: 36px !important;
    }
    .el-button{
      background-color: #5f84ff;
      color: #fff;
      border: none;
      margin-left: 10px;
      width:80px;
      height:36px;
      padding: 0 0;
    }
  }
  .down{
    .mid{//新建按钮
    margin-bottom: 20px;
      .el-button{
        background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
        color:#fff ;
        border:none;
      }
      .el-button:hover{
        background: linear-gradient(135deg,#ff7d43,#db3602)!important;
      }
    }
    .pageinfo{//页脚的 页数信息
      display:flex;
      justify-content:space-between;
      width:100%;
      height:96px;
      padding:32px 16px;
      line-height:32px;
      .button{
        display: flex;
        .pagebutton{
          width:70px;
          height:32px;
          padding:0 0
        }
      }
    }
  }
}
.el-dialog{
  .el-form-item{
    display:flex
  }
}
</style>
